<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>首页 - 维修故障排查系统</title>
</head>
<body>
    <div layout:fragment="content">
        <!-- Hero Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="bg-primary text-white rounded p-4">
                    <h1 class="display-4">欢迎使用维修故障排查逆向分析系统</h1>
                    <p class="lead">专业的设备故障诊断与逆向分析平台</p>
                </div>
            </div>
        </div>
        
        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-danger text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title" th:text="${totalFaults}">0</h4>
                                <p class="card-text">总故障数</p>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-exclamation-triangle fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title" th:text="${pendingFaults}">0</h4>
                                <p class="card-text">待处理</p>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-clock fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title" th:text="${resolvedFaults}">0</h4>
                                <p class="card-text">已解决</p>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-check-circle fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="card-title" th:text="${#lists.size(recentFaults)}">0</h4>
                                <p class="card-text">今日新增</p>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-plus-circle fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="mb-3">快速操作</h2>
            </div>
            
            <div class="col-md-3 mb-3">
                <a th:href="@{/faults/new}" class="btn btn-primary btn-lg w-100 py-4">
                    <i class="fas fa-plus-circle fa-2x mb-2"></i><br>
                    <strong>故障录入</strong>
                </a>
            </div>
            
            <div class="col-md-3 mb-3">
                <a th:href="@{/troubleshooting}" class="btn btn-success btn-lg w-100 py-4">
                    <i class="fas fa-search fa-2x mb-2"></i><br>
                    <strong>故障排查</strong>
                </a>
            </div>
            
            <div class="col-md-3 mb-3">
                <a th:href="@{/cases}" class="btn btn-info btn-lg w-100 py-4">
                    <i class="fas fa-book fa-2x mb-2"></i><br>
                    <strong>案例查询</strong>
                </a>
            </div>
            
            <div class="col-md-3 mb-3">
                <a th:href="@{/troubleshooting/reverse-analysis}" class="btn btn-warning btn-lg w-100 py-4">
                    <i class="fas fa-cogs fa-2x mb-2"></i><br>
                    <strong>逆向分析</strong>
                </a>
            </div>
        </div>
        
        <!-- Recent Faults -->
        <div class="row">
            <div class="col-12">
                <h2 class="mb-3">最近故障</h2>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>故障编号</th>
                                <th>设备名称</th>
                                <th>故障描述</th>
                                <th>状态</th>
                                <th>创建时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="fault : ${recentFaults}">
                                <td th:text="${fault.faultNumber}"></td>
                                <td th:text="${fault.deviceName}"></td>
                                <td th:text="${#strings.abbreviate(fault.faultDescription, 50)}"></td>
                                <td>
                                    <span class="badge" 
                                          th:classappend="${fault.status.name() == 'PENDING'} ? 'bg-warning' : 
                                                         ${fault.status.name() == 'RESOLVED'} ? 'bg-success' : 'bg-secondary'"
                                          th:text="${fault.status}"></span>
                                </td>
                                <td th:text="${#temporals.format(fault.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
